<template>
  <div id="salvenote">
    <div class="page-header">
      <span class="title-item h3">处理记录</span>
    </div>
    <div class="table-form">
      <my-table :rowKey="(record) => record.id" :columns="columns" :data-source="data" :pagination="false" indeterminate="false">
        <span slot="comparatorStatus" slot-scope="comparatorStatus">
          {{comparatorStatus|comparatorStatusFilt}}
<!--          <a class="solvebtn" v-if="comparatorStatus == 1">通过</a>-->
<!--          <a class="solvered" v-else-if="comparatorStatus == 2">驳回</a>-->
<!--          <a class="solveyellow" v-else-if="comparatorStatus == 3">退回</a>-->
        </span>
      </my-table>
      <div class="bottompage">
        <a-button type="primary" @click="a">返回列表</a-button>

        <a-pagination
          :show-total="(total) => `共 ${total}条记录`"
          v-model="current"
          :total="total"
          :defaultPageSize="10"
          :item-render="itemRender"
          @change="pagechangeFn"
        />
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
const data = [];

export default {
  data() {
    return {
      data,
      columns: [
        {
          title: "序号",
          width: "100px",
          dataIndex: "id",
          scopedSlots: { customRender: "index" },
          align: "center",
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "设备名称",
          dataIndex: "comparatorName",
          align: "center",
        },
        {
          title: "操作时间",
          dataIndex: "createTime",
          align: "center",
        },
        // {
        //   title: "领用部门",
        //   dataIndex: "areaName",
        //   align: "center",
        // },
        {
          title: "操作人",
          dataIndex: "nickName",
          align: "center",
        },
        // {
        //   title: "使用项目",
        //   dataIndex: "useProject",
        //   align: "center",
        // },
        {
          title: "申请备注信息",
          dataIndex: "note",
          align: "center",
        },
        {
          title: "操作结果",
          dataIndex: "comparatorStatus",
          key: "comparatorStatus",
          scopedSlots: { customRender: "comparatorStatus" },
          align: "center",
        },
      ],
      current: 1,
      size: 10,
      total: 0,
      id: "", //对比仪型号,
      userId: "",
    };
  },
  filters:{
    comparatorStatusFilt(index){
      return ["申请","通过","驳回","退回"][index]
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
          );
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  mounted() {
    this.getId();
    this.getUseList();
  },
  methods: {
    getId() {
      this.userId = this.$user.id;
    },
    //当前对比仪的领用记录
    getUseList() {
      (this.id = this.$route.query.id),
        this.$api
          .PostlistRecipientsInfoDetails({
            currentPage: this.current,
            pageSize: this.size,
            id: this.id,
            userId: this.userId,
          })
          .then((res) => {
            console.log(res);
            this.data = res.data.data.records;
            this.total = res.data.data.total;
            this.data.forEach((v) => {
              v.createTime = moment(v.createTime).format("YYYY-MM-DD");
            });
          });
    },
    // 分页器
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.size = pageSize;
      this.getUseList();
    },
    open(index) {
      this.activeKey = index;
    },
    // 点击换页面
    a() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="scss" >
#salvenote {
  position: relative;
  width: 98%;
  height: 98%;
  padding: 1%;
  box-sizing: border-box;
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}

#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: green;
}
#salvenote .solvered {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: red;
}
#salvenote .solveyellow {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: yellow;
}


.bottompage {
  width: 96%;
  position: absolute;
  right: 3%;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
}

::v-deep .page-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
  height: 7%;
  width: 100%;
  padding-top: 1%;
  box-sizing: border-box;
}

::v-deep .title-item {
  font-size: 24px;
  height: 100%;
}
::v-deep .download-btn {
  margin-right: 40px !important;
  color: #2c6a5f;
  cursor: pointer;
  font-size: 16px;
  height: 100%;
  padding-top: 1%;
}
::v-deep .table-form {
  height: 90%;
}

/* 分页 */

.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}


</style>

